<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/11/17
  Time: 19:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>添加房屋</title>
   <%
      pageContext.setAttribute("APP_PATH", request.getContextPath());
   %>
   <link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
   <link href="${APP_PATH}/static/css/dashboard.css" rel="stylesheet">
   <link href="${APP_PATH}/static/css/common_style.css" rel="stylesheet">
</head>
<body>
<div id="app" class="col-md-10 col-md-offset-2 main">
   <h1 class="page-header">{{title}}</h1>
   <form v-on:submit="submit" id="form1" action="${APP_PATH}/addHouse" method="post">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">填写房屋信息</h3>
         </div>
         <div class="panel-body">
            <div class="row">
               <div class="col-lg-8">
                  <label>房屋名称</label>
                  <input class="form-control" name="house_name" type="text" v-model="house_name">
               </div>
               <div class="col-lg-4">
                  <label>价格（每月）</label>
                  <input class="form-control" name="price" type="text" v-model="price">
               </div>
               <div id="address" class="col-lg-6 row-no-gutters">
                  <label class="col-lg-12">地址</label>
                  <div class="col-lg-4">
                     <select v-on:change="cascadePC" name="address" class="form-control"
                             v-model="address_province">
                        <option v-for="option in option_province" v-bind:value="option.id">
                           {{ option.fullname }}
                        </option>
                     </select>
                  </div>
                  <div class="col-lg-4">
                     <select v-on:change="cascadeCA" name="address" class="form-control" v-model="address_city">
                        <option v-for="option in option_city" v-bind:value="option.id">
                           {{ option.fullname }}
                        </option>
                     </select>
                  </div>
                  <div class="col-lg-4">
                     <select name="address" class="form-control" v-model="address_area">
                        <option v-for="option in option_area" v-bind:value="option.id">
                           {{ option.fullname }}
                        </option>
                     </select>
                  </div>
               </div>
               <div class="col-lg-6">
                  <label for="name">详细地址</label>
                  <input id="name" name="detailed_address" class="form-control" type="text" v-model="detailed_address">
               </div>
               <div class="col-lg-12">
                  <label for="name">描述</label>
                  <textarea class="form-control" name="description" rows="3" v-model="description"></textarea>
               </div>
            </div>
         </div>
      </div>
      <div class="panel panel-default">
         <div class="panel-heading">
            <h3 class="panel-title">选项</h3>
         </div>
         <div class="panel-body">
            <div class="row">
               <div class="col-lg-2 col-lg-offset-8">
                  <button type="button" class="btn btn-lg btn-block btn-primary"
                          onclick="window.history.back(-1)">返回
                  </button>
               </div>
               <div class="col-lg-2  ">
                  <button type="submit" class="btn btn-lg btn-block btn-primary">保存</button>
               </div>
            </div>
         </div>
      </div>
   </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/vue.js"></script>
<script>
    let action;
    let form = $('#form1')

    // 行政区规划数据
    let api = {}
    // 使用腾讯位置服务API获取全部行政区规划数据
    $.ajax({
        url: "https://apis.map.qq.com/ws/district/v1/list?key=SQ3BZ-CVC6U-BVBVF-BIOUI-MIP5J-CFBY4&output=jsonp",
        dataType: 'jsonp',
        processData: false,
        type: 'get',
        success: function (data) {
            console.log('获取行政区规划数据成功')
            api.province = data.result[0]
            api.city = data.result[1]
            api.area = data.result[2]
            init()
        }
    })
    window.addEventListener("beforeunload", function () {
        localStorage.removeItem("selected_house")
    })

    let str = localStorage.getItem("selected_house");
    let obj = JSON.parse(str);

    function init() {
        let str = localStorage.getItem("selected_house");
        let obj = JSON.parse(str);

        if (obj != null) {
            action = "${APP_PATH}/house-ua?mode=2"

            view.house_id = obj.value.house_id
            view.house_name = obj.value.house_name
            view.price = obj.value.price
            view.detailed_address = obj.value.detailed_address
            view.description = obj.value.description

            if (obj.value.address_province !== undefined) {
                view.drawProvinceList()
                // 通过行政区名获取ID
                for (let p in view.option_province) {
                    if (view.option_province[p].fullname === obj.value.address_province) {
                        view.address_province = view.option_province[p].id
                        break
                    }
                    if (view.address_province.length === 0) {
                        view.address_province = view.option_province[0].id
                    }
                }
                view.drawCityList()

                if (obj.value.address_city !== undefined) {
                    for (let c in view.option_city) {
                        if (view.option_city[c].fullname === obj.value.address_city) {
                            view.address_city = view.option_city[c].id
                            break
                        }
                    }
                } else {
                    view.address_city = view.option_city[0].id
                }


                view.drawAreaList()


                if (view.option_area[0] !== undefined && obj.value.address_area !== undefined) {
                    for (let a in view.option_area) {
                        if (view.option_area[a].fullname === obj.value.address_area) {
                            view.address_area = view.option_area[a].id
                            break
                        }
                    }
                }
            }
        } else {
            action = "${APP_PATH}/house-ua?mode=1"
            // 默认北京
            view.drawProvinceList()
            view.address_province = view.option_province[0].id

            view.drawCityList()
            view.address_city = view.option_city[0].id
        }
    }

    let view = new Vue({
        el: '#app',
        data: {
            title: '',

            house_id: '',
            house_name: '',
            price: '',
            detailed_address: '',

            address_province: '',
            address_city: '',
            address_area: '',

            option_province: {},
            option_city: {},
            option_area: {},

            description: '',
        },
        methods: {
            cascadePC() {
                this.drawCityList()
                this.address_city = this.option_city[0].id
                this.cascadeCA();
            },
            cascadeCA() {
                this.drawAreaList()
                if (this.option_area[0] !== undefined) {
                    this.address_area = this.option_area[0].id
                }
            },
            drawProvinceList() {
                view.option_province = api.province
            },
            drawCityList() {
                this.option_city = {}

                let prefix = view.address_province.substr(0, 2)
                let count = 0;

                for (let c in api.city) {
                    if (api.city[c].id.substr(0, 2) === prefix) {
                        this.option_city[count] = api.city[c]
                        count++
                    }
                }
            },
            drawAreaList() {
                this.option_area = {}
                // 省市行政区前缀
                let prefix = view.address_city.substr(0, 4)
                let count = 0;

                for (let c in api.area) {
                    if (api.area[c].id.substr(0, 4) === prefix) {
                        this.option_area[count] = api.area[c]
                        count++;
                    }
                }
            },
            translate(id, option) {
                for (let n in option) {
                    if (option[n].id === id) {
                        return option[n].fullname
                    }
                }
                return ''
            },
            submit: function (event) {
                event.preventDefault();
                $.ajax({
                    url: action,
                    type: 'POST',
                    dataType: 'text',
                    data: {
                        house_id: view.house_id,
                        house_name: view.house_name,
                        price: view.price,
                        detailed_address: view.detailed_address,
                        address: this.translate(view.address_province, view.option_province) + "," +
                            this.translate(view.address_city, view.option_city) + "," +
                            this.translate(view.address_area, view.option_area),
                        description: view.description,
                    },
                    success: function () {
                        alert("成功")
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("失败，状态码：" + XMLHttpRequest.status)
                    }
                });
            }
        }
    })

    if (obj != null) {
        view.title = "修改房屋"
    } else {
        view.title = "添加房屋"
    }
</script>
</body>
</html>
